<template>
  <div class="app-container">
    <!-- <Month /> -->
    <!-- 日历和日报表格切换按钮 -->
    <el-switch v-model="isShowDailyTable" active-text="显示日报日历" inactive-text="显示本月日报表格">
    </el-switch>

    <!-- <el-button>{{显示日报日历}}</el-button> -->
    <el-calendar v-model="value" v-show="isShowDailyTable">
      <template slot="dateCell" slot-scope="{date, data}">
        <div style="height: 75%;" :class="data.isSelected ? 'is-selected' : ''" @click="getDaliyContent(data);">
          {{ data.day.split('-').slice(1).join('-').split('-').slice(1).join('-') }}
          {{ isSelected(data.day) ? '✔️' : '' }}
          <div v-if="isShowAddButton(data.day) && parseInt(dateFormat(data.day))==new Date().getDate() "></div>
        </div>
       
      </template>
    </el-calendar>
    <!-- 添加今日工作日报按钮 -->
    <AddDailyForm :refresh="refresh" :AddDailyForm="AddDailyForm" />
    <!-- 本月日报和日历卡片切换按钮 -->
    <!-- <div class="showTable"> -->
      <dailytable v-show="!isShowDailyTable" :dailyDataTable="dailyDataTable" />
  </div>
</template>

<script>
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { dailyContent } from "@/api/request";
  import { monthContent, getMonthly } from "@/api/request";
  import Month from "@/components/monthly";
  import AddDailyForm from "@/components/Daily/index.vue";
  import dailytable from "@/components/DailyTable/index"
  export default {
    name: "Daily",
    data() {
      return {
        // 点击切换日报表格和日历按钮
        isShowDailyTable: true,
        userId: this.$store.state.user.id,
        day: 19,
        clickMonth: '',
        value: new Date(),
        dialogVisible: false,
        today: "", //当前日期
        daliyContent: "", //接收到的工作日报内容
        dailyDataTable: [],//进入页面请求本月日报信息
        //查询日报参数
        queryParams: {
          //用户名
          username: this.$store.state.user.nickname,
          //年
          year: "",
          //月
          month: "",
          //日
          day: "",
        },

        queryDayList: {
          //调用获取本月日报接口参数
          year: new Date().getFullYear(),
          month: new Date().getMonth() + 1,
          type: "1 "
        },
        tempDayList: [], //存放日报数据
        dayArr: [], //存放本月填写日报日期
        isShowAdd: false, //是否展示本日添加按钮
        AddDailyForm: {
          title: "日报", //日报标题
          type: "1", //确认是日报
          id: "", //需要传入id
          dailyContent: "", //传入日报内容
          isLeave: false,
          btnName: "按钮",
          time: "",
          isShow: false,
          // isDisable:false
        }
      };
    },
    components: {
      Month,
      AddDailyForm,
      dailytable
    },
    mounted() {
      //  渲染页面时请求本月填写日报的日期
      this.getMonthList(this.queryDayList);
      this.test()
    },
    methods: {


      test() {
        // console.log('value', this.value)
        let button = document.getElementsByClassName("el-button--plain")[0]
        button.addEventListener('click', () => {
          // console.log('点击了上个月')
          this.queryDayList.month -= 1
          if (this.queryDayList.month === 0) {
            this.queryDayList.month = 12
            this.queryDayList.year -= 1
          }
          // console.log(this.dayArr)
          // this.dayArr=[]
          this.getMonthList(this.queryDayList)
        })

        let button2 = document.getElementsByClassName("el-button--plain")[1]
        button2.addEventListener('click', () => {
          this.queryDayList.month = new Date().getMonth() + 1
          this.getMonthList(this.queryDayList)
        })
      },
      
      //请求本月填写日报的日期
      getMonthList(params) {
        monthContent(params).then(res => {
          this.tempDayList = res.data;
          this.tempDayList.forEach(item => {
            var date = item.year + "-" + item.month + "-" + item.day;
            this.dayArr.push(date);
          });
          console.log('获取本月日报信息', res.data)
          this.dailyDataTable = res.data
        });
      },
      refresh() {
        this.getMonthList(this.queryDayList);
        this.isSelected();
      },
      // 传入年月日转成日
      dateFormat(data) {
        return data
          .split("-")
          .slice(1)
          .join("-")
          .split("-")
          .slice(1)
          .join("-");
      },
      //日历当日是否显示添加日报按钮
      isShowAddButton(day) {
        return this.dayArr.indexOf(parseInt(this.dateFormat(day))) === -1;
      },
      //判断是否勾选
      isSelected(date) {
        var isSelect = false;
        let month = parseInt(date.split("-")[1]);
        let day = parseInt(date.split("-")[2]);
        let year = parseInt(date.split("-")[0]);
        date = year + "-" + month + "-" + day;
        for (var i = 0; i < this.dayArr.length; i++) {
          if (date == this.dayArr[i]) {
            isSelect = true;
          }
        }
        return isSelect;
      },
      /*
          默认显示当天内容
        */
      isShow(data) {
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, "0");
        var mm = String(today.getMonth() + 1).padStart(2, "0");
        var yyyy = today.getFullYear();
        today = yyyy + "-" + mm + "-" + dd;
        this.today = today;
        if (this.today == data) {
          return true;
        } else {
          return false;
        }
      },
      /*
        处理日期方法
        将点击日历获取的日期和现在日期进行比较
        在今天和今天的日期之前的日期返回true
        在未来的日期返回false
      */
      handlerTime(data) {
        //鼠标获取的日期
        this.queryParams.year = data.day.split("-")[0];
        this.queryParams.month = parseInt(data.day.split("-")[1]);
        this.queryParams.day = parseInt(data.day.split("-")[2]);
        var choseDay =
          this.queryParams.year +
          "-" +
          this.queryParams.month +
          "-" +
          this.queryParams.day;
        //  当前的日期
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, "0");
        var mm = String(today.getMonth() + 1).padStart(2, "0");
        var yyyy = today.getFullYear();
        today = yyyy + "-" + mm + "-" + dd;
        // console.log('本日日期:',today)
        //日期转数字判断
        var time1 = new Date(choseDay);
        var time2 = new Date(today);
        return time2.getTime() >= time1.getTime();
      },
      /** 点击日历卡片查询日报信息 */
      getDaliyContent(data) {
        this.dialogVisible = true;
        this.daliyContent = "";
        this.clickMonth = parseInt(data.day.split('-')[1])
        // 点击按钮获取当前卡片月份
        console.log("获取到的clickMonth", this.clickMonth)
        // this.getDailyByMonth();
        //假如点击日历的日期是当前日期之前
        if (this.handlerTime(data)) {
          //调用接口
          dailyContent(this.queryParams)
            .then(response => {
              this.centerDialogVisible = true;
              this.AddDailyForm.id = response.data.id;
              this.AddDailyForm.dailyContent = response.data.briefSummary;
              this.AddDailyForm.time = data.day;
              this.AddDailyForm.isShow = true;
            })
            .catch((err) => {
              console.log(err)
              this.AddDailyForm.isShow = true;
              this.AddDailyForm.dailyContent = "";
              this.AddDailyForm.time = data.day;
            });
        } else {
          this.$message.warning("当前日期不可填写")
        }
      }
    }
  };
</script>
<style scoped>
   ::v-deep .el-calendar-table:not(.is-range) td.next {
    display: none;
  }

  ::v-deep .el-calendar-table:not(.is-range) td.prev {
    visibility: hidden;
  }


</style>
